@import 'styles/variables'

$color-typo-dark-primary: $orange-1
$color-typo-grey-primary: $grey-2
$color-typo-grey-secondary: $grey-2

$color-bg-orange-primary: $orange-pale-1
$color-bg-orange-secondary: $orange-pale-1
$color-bg-railcartype-primary: $grey-1
$color-bg-railcartype-secondary: $orange-1
$color-bg-clock: $orange-1
$color-bg-train: $orange-1

// todo

.order-page__main > h4
  margin-bottom: 60px

.clock__icon
  width: 30px
  height: 30px
  fill: $color-bg-clock

.places
  &__block
    background: $white
    border: 1px solid #C4C4C4
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25)

    &:not(:last-child)
      margin-bottom: 30px

    &_list
      margin-bottom: 100px

    & .trip__duration_container
      justify-content: center

  &__change-train
    display: flex
    gap: 10px

    padding-inline: 20px
    padding-block: 35px

    &_return
      justify-content: flex-end

    .arrow-in-rectangle__large
      display: block
      width: 76px
      height: 60px

      fill: #FFA800

  &__ticket-info
    background: #F7F6F6
    display: flex
    align-items: center

  &__header
    margin-top: 35px
    margin-left: 20px
    margin-bottom: 25px

.railcar-type
  &__choosing_header
    background-color: $color-bg-orange-primary

.railcar-type
  &__buttons
    display: flex
    padding-inline: 35px
    margin-bottom: 25px

  &__button
    padding: 0
    flex: 1 1

    &.selected
      .railcar-type__icon
        fill: #FFA800

      .railcar-type__title
        color: #FFA800

    &:disabled
      cursor: auto

      .railcar-type__icon
        fill: #E5E5E5

      .railcar-type__title
        color: #E5E5E5

  &__icon
    display: block
    height: 50px
    fill: $color-bg-railcartype-primary

    &_wrapper
      display: flex
      justify-content: center

  &__title
    margin-top: 20px
    font-size: 1.5rem
    color: $color-typo-grey-secondary

.train-info__trip_header
  margin-bottom: 5px
  font-weight: 700
  color: #3E3C41

.directions
  padding: 15px 35px
  border-inline: 1px solid white

.trip__duration_container
  display: flex
  flex-direction: column
  flex-shrink: 0

.train-info__train-icon
  margin: auto
  width: 15px
  fill: $color-bg-train

  &_wrapper
    // height: 30px
    display: flex
    width: 30px
    min-width: 30px
    height: 30px
    border: 2px solid $color-bg-train
    border-radius: 50%

.places__ticket-info
  &_from-to
    display: flex
    justify-content: space-between
    align-items: center
    flex: 2

    border-inline: 1px solid white
    padding-block: 30px
    padding-inline: 35px

  &_train-info
    display: flex
    align-items: center
    gap: 25px
    flex: 1

    min-width: 25%
    padding: 15px 35px

  &_time
    flex: 1
    display: flex
    align-items: center
    padding-inline: 35px

  & .ticket__trip-points
    padding-inline: 0

.icon__wrapper
  margin-right: 10px

.time__text
  font-size: 1.125rem
  line-height: 1.2
  color: $black

.ticket-amount
  &__form
    // margin-top: 25px
    display: flex

  &__block
    padding: 20px 40px 25px
    border: 1px solid transparent
    flex: 1

    &:hover:not(&:has(input:focus-visible))
      border-color: rgba(255, 168, 0, 0.79)

    &:has(input:focus-visible)
      background: #F7F6F6
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25)

    &_description
      margin-top: 22px
      font-size: 1rem
      color: #000000

  &__input
    border: none
    background: transparent
    flex: auto
    outline: none
    font-size: 1.125rem // 18px
    color: #292929
    padding-left: 0.25em
    width: 100%

    &_label
      position: relative
      display: flex
      align-items: center

      height: 50px
      padding-inline: 15px
      border: 1px solid #928F94
      border-radius: 5px

      background: white
      cursor: text

    &_text
      display: block
      flex-shrink: 0
      // font-size: 1.125rem // 18px
      font-size: 1rem // 16px
      color: #292929

// .Grey.tmp
//   background: #F7F6F6
//   box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25)
